<template>
  <div class="examManage">
    <div class="examContainer">
      <div class="operateBox">
        <div class="searchBox">
          <span>班级：</span>
          <el-select
            placeholder="请选择班级"
            style="width: 240px"
            clearable
            v-model="queryForm.deptids"
            @change="getExamListData"
            @clear="getExamListData"
          >
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.deptName"
              :value="item.deptId"
            >

            </el-option>
          </el-select>

          <span style="margin-left: 32px;">考试名称：</span>
          <el-input
            style="width: 256px;height: 32px;"
            v-model="queryForm.examName"
            placeholder="请输入考试名称"
            clearable
            @input="getExamListData"
            @clear="getExamListData"
          ></el-input>

          <span style="margin-left: 32px;">试卷名称：</span>
          <el-select
            placeholder="请选择试卷"
            style="width: 256px;height: 32px;"
            clearable
            v-model="queryForm.examPaperId"
            @change="getExamListData"
            @clear="getExamListData"
          >
            <el-option
              v-for="item in paperList"
              :key="item.paperId"
              :value="item.paperId"
              :label="item.paperTitle"
            >
            </el-option>
          </el-select>

          <img
            src="@/assets/images/reset.png"
            style="cursor: pointer;margin-right: 13px;"
            @click="resetData"
          >
          <span
            style="cursor: pointer;"
            @click="resetData"
          >重置数据</span>
        </div>

        <div class="exportBox">
        </div>
      </div>

      <div class="tableBox">
        <div class="operateTable">
          <el-button
            plain
            class="batchDeleteBtn"
            @click="batchDeleteExam"
            :disabled="selectId.length === 0"
          >
            批量删除
          </el-button>

          <div class="downloadAndAdd">
            <el-button
              plain
              class="addTestBtn"
              @click="addExamBtn"
            >
              <el-icon style="margin-right: 16px;">
                <Plus />
              </el-icon>
              新增考试
            </el-button>
          </div>
        </div>

        <div class="tableDetail">
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              label="编号"
              width="100"
            >
              <template #default="scope">
                <!-- 生成不重复的序号 -->
                {{ (paginationData.pageNum - 1)* paginationData.pageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="examName"
              label="考试名称"
            ></el-table-column>
            <el-table-column
              prop="depts"
              label="考试班级"
            >
              <template #default="scope">
                <span
                  v-for="(item,index) in scope.row.depts"
                  :key="item.deptId"
                >
                  <span>{{ item.dept_name }}</span>
                  <span v-if="index < scope.row.depts.length - 1">,</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="examPaperName"
              label="试卷名称"
            ></el-table-column>
            <el-table-column
              prop="examStart"
              label="考试时间"
              width="300"
            >
              <template #default="scoped">
                {{ scoped.row.examStart + ' 至 ' + scoped.row.examEnd}}
              </template>
            </el-table-column>
            <el-table-column
              prop="createBy"
              label="创建人"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="成绩"
            >
              <template #default="scope">
                <el-button
                  link
                  style="font-size: 14px;color: #5974FF;"
                  @click="testDetail(scope)"
                >查看详情</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="操作"
            >
              <template #default="scope">
                <el-button
                  link
                  @click="editExam(scope)"
                >
                  <el-icon
                    style="color: #5974FF;font-size: 16px;margin-right: 2px;"
                  >
                    <EditPen />
                  </el-icon>
                  <span style="font-size: 12px;color: #363636;">编辑</span>
                </el-button>
                <el-button
                  link
                  @click="deleteExam(scope)"
                >
                  <el-icon
                    style="color: #F99D38;font-size: 16px;margin-right: 2px;"
                  >
                    <Delete />
                  </el-icon>
                  <span style="font-size: 12px;color: #363636;">删除</span>

                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <Pagination
          :total="paginationData.total"
          v-model:page="paginationData.pageNum"
          v-model:limit="paginationData.pageSize"
          @pagination="handlePaginationChange"
        ></Pagination>
      </div>
    </div>

    <AddExam
      ref="addExamRef"
      @updateTable="getExamListData"
    >
    </AddExam>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 引入新增考试的弹窗
import AddExam from './components/addExam.vue';

// 引入获取考试列表,删除考试,获取考试详情信息的接口
import { getExamList, delExam, getExamDetail } from '@/api/assessment/exammanage.js'

// 引入查询部门列表的接口
import { listDept } from '@/api/system/dept.js'

// 引入查询试卷列表的接口
import { testPaperList } from '@/api/assessment/testpapermanage.js'

// 引入分页组件
import Pagination from '@/components/Pagination/index.vue'

import { ElMessage, ElMessageBox } from 'element-plus'

import { exportExcel } from "@/utils/peak-tools.js";
import { useRoute, useRouter } from 'vue-router';

const route = useRoute()
const router = useRouter()
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },

])

// 定义分页数据
const paginationData = ref({
  total: 0,
  pageNum: 1,
  pageSize: 10
})

// 处理分页
function handlePaginationChange (data) {
  paginationData.value.pageNum = data.page
  paginationData.value.pageSize = data.limit
  getExamListData()
}

const deptList = ref([])
// 查询部门列表
async function getDeptList () {
  const res = await listDept()
  // console.log(res)
  deptList.value = res.rows
}
getDeptList()

const paperList = ref([])
// 查询试卷列表
async function getTestPaperList () {
  const res = await testPaperList({
    pageNum: 1,
    pageSize: 100
  })
  paperList.value = res.data.records
}
getTestPaperList()

const queryForm = ref({
  deptids: [],
  examPaperId: null,
  examName: ''
})

// 获取考试列表
async function getExamListData () {
  const res = await getExamList({
    ...paginationData.value,
    ...queryForm.value
  })
  paginationData.value.total = res.total
  tableData.value = res.rows
}
getExamListData()



// 重置数据
function resetData () {
  queryForm.value = {
    deptids: [],
    examPaperId: null
  }
  paginationData.value = {
    total: 0,
    pageNum: 1,
    pageSize: 10
  }
  getExamListData()
}
const addExamRef = ref(null)



function addExamBtn () {
  try {
    addExamRef.value.dialogVisible = true
  } catch (err) {
    // console.log(err)
  }
}

function testDetail (scope) {
  router.push({
    path: 'viewtestdetail',
    query: {
      examId: scope.row.examId
    }
  })
}

// 编辑考试
async function editExam (scope) {
  const res = await getExamDetail(scope.row.examId)
  addExamRef.value.addExamForm = res.data
  addExamRef.value.addExamForm.deptids = res.data.depts.map(item => item.dept_id)
  addExamRef.value.time = [res.data.examStart, res.data.examEnd]
  addExamRef.value.dialogVisible = true
}

// 删除考试
function deleteExam (scope) {
  ElMessageBox.confirm(
    '您确定要删除此考试吗？',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      confirmButtonClass: 'confirmDeleteBtn',
      cancelButtonClass: 'cancelDeleteBtn',
      type: 'warning',
    }
  )
    .then(async () => {
      await delExam(scope.row.examId)
      getExamListData()
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const selectId = ref([])
// 选中的id
function handleSelectionChange (item) {

  selectId.value = item.map(item => item.examId)
}

// 批量删除
function batchDeleteExam () {
  ElMessageBox.confirm(
    '您确定删除选中的考试吗？',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await delExam(selectId.value)
      getExamListData()
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

</script>

<style lang="scss" scoped>
.examManage {
  padding: 32px;
  background-color: #f5f6f9;
  .examContainer {
    min-height: 936px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    .operateBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 88px;
      padding: 0 32px;
      border-bottom: 1px solid #d4d4d4;
      .searchBox {
        display: flex;
        align-items: center;
        span {
          font-size: 16px;
          color: #696969;
        }

        ::v-deep(.el-input__wrapper) {
          box-shadow: 0;
          background-color: #f5f5f5;
        }


        ::v-deep(.is-focus) {
          box-shadow: 0 !important;
          border: none !important;
        }
        img {
          line-height: 36px;
          margin-left: 36px;
        }
      }
      .exportBox {
        .exportBtn {
          width: 80px;
          height: 40px;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #5974ff;
          font-size: 16px;
          color: #5974ff;
        }
      }
    }
    .tableBox {
      padding: 24px 32px;
      .operateTable {
        display: flex;
        justify-content: space-between;
        .batchDeleteBtn {
          width: 112px;
          height: 40px;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #5974ff;
          font-size: 16px;
          color: #5974ff;
        }

        .downloadAndAdd {
          .downLoadTemplate {
            font-size: 16px;
            color: #44bd60;
            margin-right: 48px;
          }

          .addTestBtn {
            width: 144px;
            height: 40px;
            background: #5974ff;
            border-radius: 6px 6px 6px 6px;
            font-size: 16px;
            color: #ffffff;
          }
        }
      }
      .tableDetail {
        margin-top: 24px;
        ::v-deep(.el-table__header) {
          height: 56px;
        }

        ::v-deep(.el-table__row) {
          height: 56px;
        }
      }
    }
  }
}
</style>